<template>
  <div>
    <el-form-item>
      <div class="work-type-list">
        <!--使用参数返回后 确保每一次调用都是唯一值 还是不要玩骚的了-->
        <!-- :type="randomType()" -->
        <el-tag
          v-if="isUrgent"
          type="danger"
          effect="dark"
          style="margin-right: 1.2rem"
          >重要</el-tag
        >
        <el-tag v-for="i in workType" :key="i" effect="dark" class="tag-item">{{
          i
        }}</el-tag>
      </div>
      <div class="form-item">
        <div class="switch-item">
          <el-switch
            v-model="sync"
            active-color="#13ce66"
            inactive-color="#777777"
            @change="switchChange"
          >
          </el-switch>
        </div>
        <div class="value-item">
          <span v-if="!isDone" style="font-size: 1.8rem">
            {{ value
            }}<el-link @click="changeEdit"
              ><i class="el-icon-edit"></i
            ></el-link>
          </span>
          <s v-else style="font-size: 1.8rem">
            {{ value }}
          </s>
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      require: true,
      default: () => "",
    },
    isDone: {
      type: Boolean,
      require: true,
      default: () => false,
    },
    uuid: {
      type: String,
      require: true,
      default: () => "",
    },
    workType: {
      type: Array,
      require: true,
      default: () => [],
    },
    isUrgent: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {
    sync: {
      get() {
        return this.isDone;
      },
      set(newValue) {
        this.$emit("update:isDone", newValue);
      },
    },
    randomType() {
      const typeList = ["", "success", "info", "danger", "warning"];
      return function () {
        // 返回一个0-5不包括5的随机值 然后再取整
        return typeList[(Math.random() * 5).toFixed(0)];
      };
    },
  },
  methods: {
    changeEdit() {
      this.$emit("changeEdit", this.uuid);
    },
    switchChange() {
      this.$emit("switchChange", this.uuid);
    },
  },
};
</script>

<style lang="less">
.work-type-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  padding-left: 6rem;
  margin-bottom: 1.2rem;
  .tag-item {
    margin-right: 1.2rem;
  }
}
.form-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  line-height: 2rem;
  .switch-item {
    width: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .value-item {
    width: calc(100% - 6rem);
    margin-left: 1rem;

    text-align: left;
    word-break: break-all;
    hyphens: auto;
    .el-link {
      margin-left: 1rem;
      display: none;
    }

    .el-icon-edit {
      font-size: 1.6rem;
    }
    &:hover {
      .el-link {
        display: inline-block;
      }
    }
  }
}
</style>
